
<style>
	#table-filelist th:nth-child(4) {
		min-width: 50px;
	}
</style>

<div id="main-wrapper">
	<h1>
		<i class="glyphicon glyphicon-file"></i>文件共享
	</h1>
	<table id="table-filelist" class="table table-striped">
		<thead>
		<tr>
			<th>文件名</th>
			<th>文件大小</th>
			<th>下载次数</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody></tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <script type="text/html" id="pagin-tmpl">
                        <ul class="pagination">
                            <li>
                                <a onclick="getFileList(1)">&laquo;</a>
                            </li>
                            <% if (current > 2) { %>
                            <li class="disabled">
                                <a>..</a>
                            </li>
                            <% } %>
                            <% if (prev) { %>
                            <li>
                                <a onclick="getFileList(<%- prev %>)"><%- prev %></a>
                            </li>
                            <% } %>
                            <li class="active">
                                <a onclick="getFileList(<%- current %>)"><%- current %></a>
                            </li>
                            <% if (next) { %>
                            <li>
                                <a onclick="getFileList(<%- next %>)"><%- next %></a>
                            </li>
                            <% } %>
                            <% if (current < (count - 1)) { %>
                            <li class="disabled">
                                <a>..</a>
                            </li>
                            <% } %>
                            <li>
                                <a onclick="getFileList(<%- count %>)">&raquo;</a>
                            </li>
                        </ul>
                    </script>
                </td>
            </tr>
        </tfoot>
	</table>
	<form id="form-upload">
		<div class="form-group">
			<div class="input-group">
				<input type="file" class="form-control" name="file" />
				<span class="input-group-btn">
					<button type="submit" class="btn btn-primary">上传</button>
				</span>
			</div>
		</div>
	</form>
</div>
<script>
	var $table = $('#table-filelist'),
		$tbody = $table.find('tbody'),
		$form = $('#form-upload'),
        $paginTmpl = $table.find('#pagin-tmpl'),
        paginTmpl = _.template($paginTmpl.html());

	getFileList(1);

	var validExts = [
		'doc', 'docx', 'ppt', 'pptx' , 'xls', 'xlsx', 'pdf',
		'txt', 'jpg', 'jpeg', 'png', 'bmp', 'gif'
	], $form = $('#form-upload');
	$form.on('submit', function(event) {
	   event.preventDefault();  // 禁止默认转页行为
	}).find('[name="file"]').ajaxfileupload({
		submit_button: $form.find('[type="submit"]'),
		'action': '/do/s/savefile',
		valid_extensions: validExts,
		onCancel: function() {
			notify('请选择文件', 0);
		},
		onComplete: function(resObj) {
			if (_.isObject(resObj) && 'status' in resObj && ! resObj['status']) {
				notify('仅支持格式 ' + validExts.join(', '), 0);
				return $form[0].reset();
			}
			if (_.isString(resObj)) {
				var resTxt = resObj;
				resTxt.match(/^[^\{]*(\{[\s\S]*\})[^\}]*$/);
				json = RegExp.$1;
				resObj = JSON.parse(json);
			}
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) {
				$form[0].reset();
			} else {
				reloadFrame();
			}
		}
	});
	
	$tbody.delegate('a.delfile', 'click', function(ev) {
		var $a = $(this),
			fid = parseInt($a.attr('data-fid'));
		$.get('/do/s/delfile?fid=' + fid, function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	});
	
	function getFileList(page) {
		$.get('/do/s/filelist', {
            page: page
        },function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],
                fileList = resObj['fileList'];
			if (! fileList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="4">没有记录</td>',
					'</tr>'
				].join(''));
			}
			$tbody.html(_.reduce(fileList, function(memo, file){
				return memo + [
					'<tr>',
						'<td>',
							'<a class="ex-link" href="/do/downfile?fid='+ file['id'] +'">',
								file['name'],
							'</a>',
						'</td>',
						'<td>' + Math.ceil(file['size'] / 1024) + ' KB </td>',
						'<td>' + file['timesDown'] + '</td>',
						'<td>',
							'<a data-fid="'+ file['id'] +'" class="ex-link delfile">删除</a>',
						'</td>',
					'</tr>'
				].join('');
			}, ''));
			// pagination
            var count = Math.ceil(total / pageSize);
            $paginTmpl.next().remove();
            $paginTmpl.after(paginTmpl({
                current: page,
                prev: page > 1 ? page - 1 : null,
                next: page < count ? page + 1 : null,
                count: count
            }));
		});
	}
</script>